
<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_tms_waybill_sign_upload')" :visible.sync="visible" custom-class="dialog_big"
    close-on-click-modal>

    <el-form label-width="auto" :model="form" :rules="rules" ref="Form">
      <el-form-item :label="$tt('label_tms_sign_img')" prop="imageUrl">
        <ex_super_input type="upload-img" :limit="1" v-model="form.imageUrl" />
      </el-form-item>
      <el-form-item :label="$tt('label_tms_sign_info')" prop="signUploadDetailDTOList">
        <ex_super_table :data="form.signUploadDetailDTOList" v-bind="option_table" ref="table_info" :max-height="500"
          :loading="loading">

        </ex_super_table>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitReady">{{ $tt('label_submit') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  data() {
    return {

      form: {
        signUploadDetailDTOList: [],
        imageUrl: null,
      },

      visible: false,

      loading: false,
      item: {},
      rules: {
        imageUrl: { required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
        signUploadDetailDTOList: {
          required: true, type: "array", validator: this.listValidator, trigger: 'blur'
        },
      },
      option_table: {

        model: [
          { key: 'waybillCode', label: 'label_tms_waybill_waybill_number', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'trackNumber', label: 'label_tms_order_no', 'min-width': 120, 'show-overflow-tooltip': true, },
          {
            key: 'quantity', label: 'label_total_sku_count', 'min-width': 80, 'show-overflow-tooltip': true,
          },
          {
            key: 'box', label: 'label_total_box_count', 'min-width': 80, 'show-overflow-tooltip': true,
          },
          {
            key: 'signQuantity', label: 'label_tms_waybill_signed_num', 'min-width': 120,
            component: ({ row }) => {
              return {
                type: 'input-number',
                class: 'w_fill',
                attrs: { min: 0, max: row.quantity, placeholder: this.$tt('label_tms_waybill_deliveries_num'), },
                on: { input: () => this.changeExceptional(row) }
              }
            },
          },
          {
            key: 'signBox', label: 'label_tms_waybill_signed_pick', 'min-width': 120,
            component: ({ row }) => {
              return {
                type: 'input-number',
                class: 'w_fill',
                attrs: { min: 0, max: row.box, placeholder: this.$tt('label_tms_waybill_pick_num'), },
                on: { input: () => this.changeExceptional(row) }
              }
            },
          },
          {
            key: 'isSignExceptional', label: 'label_tms_waybill_signed_exception', 'min-width': 120,
            component: ({ row }) => {
              return {
                type: 'select',
                class: 'w_fill',
                attrs: { enum: "YesOrNoEnum", disabled: this.isDisabledExceptional(row) },
              }
            },
          },
        ]
      },

    }
  },

  methods: {
    isDisabledExceptional(row) {

      return ((Number(row.quantity) != Number(row.signQuantity)) || (Number(row.box) != Number(row.signBox)))
    },
    changeExceptional(row) {
      if (this.isDisabledExceptional(row)) row.isSignExceptional = 'Y'
    },

    show(item) {
      this.visible = true
      // this.item = Object.assign(_.cloneDeep(item))
      // this.form = {}
      this.item = item
      this.form = {
        signUploadDetailDTOList: [],
        imageUrl: null,
      }
      this.getData(item.id)
    },
    getData(id) {
      this.loading = true
      this.$ajax({
        url: "/tms-api/waybill/TmsTaskInfoQueryRpc/selectSignUploadByWaybillTaskId.json",
        method: 'post',
        data: {
          id
        },
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.form.signUploadDetailDTOList = res.data.rows.map(it => {
            it.signQuantity = it.quantity
            it.signBox = it.box
            it.isSignExceptional = 'N'
            return it
          })
        },
      })
    },
    checkBoxRow(it) {
      this.$set(it, 'error', {})
      let check = true
      const _no_empty_key = ['isSignExceptional',]
      _no_empty_key.forEach(key => {
        if (!it[key]) {
          this.$set(it.error, key, "tip_can_no_empty")
          check = false
        }
      })
      if (Number.isFinite(Number(it.quantity))) {
        if (Number(it.quantity) > 0 && !(Number(it.signQuantity) > 0)) {
          this.$set(it.error, "signQuantity", "tip_can_no_empty")
          check = false
        }
      }
      if (Number.isFinite(Number(it.box))) {
        if (Number(it.box) > 0 && !(Number(it.signBox) > 0)) {
          this.$set(it.error, "signBox", "tip_can_no_empty")
          check = false
        }
      }
      return check
    },
    listValidator(r, v, cb) {
      if (v.length == 0) {
        return cb(this.$tt('tip_least_one_detail'))
      }
      let check = true
      v.forEach(it => {
        if (!this.checkBoxRow(it)) check = false
      })
      if (check) {
        cb()
      } else {
        cb(this.$tt('label_specification_check_fail'))
      }

    },
    hide() {
      this.visible = false
    },
    submitReady() {

      this.$refs['Form'].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          this.$message.error(this.$tt('form_validate_error'))
          return false;
        }
      });
    },
    submit() {

      let data = {
        waybillIdAndVersion: {
          id: this.item.id,
          version: this.item.version,
        },
        ...this.form
      }


      this.$ajax({
        url: "/tms-api/waybill/TmsTaskInfoOperationRpc/signUpload.json",
        method: 'post', type: 'json',
        loading: true,
        data,
        success: (res) => {
          this.$message.success(this.$tt('tip_submit_success'))
          this.hide()
          this.$emit('submitSuccess')
        },
      })


    },

  }
}
</script>
